<template>
	<view>
		<view class="head">
			<view class="orderhead">
				订单编号
			</view>
			<view class="orderNumber">
				{{ orderNumber }}
			</view>
			<view class="orderbottom">
				下单时间
			</view>
			<view class="orderTime">
				{{ orderTime }}
			</view>
		</view>
		<view style="padding-top: 20rpx;">
			<view style="padding: 10px; font-size: 40rpx;">
				<text>下单进程:</text>
			</view>
			<u-steps :current="current" activeIcon="checkmark" inactiveIcon="arrow-right" iconSize="200">
				<u-steps-item title="已下单" :desc="orderingTime">
				</u-steps-item>
				<u-steps-item title="正在支付" :desc="nowDate"></u-steps-item>
				<u-steps-item title="完成支付" :desc="payTime"></u-steps-item>
			</u-steps>
		</view>

		<view class="orderAmount">
			应付金额:￥{{ orderAmount }}
		</view>

		<view style="display: flex; float: right; margin: 40rpx;">
			<view class="cancel" @click="cancel">
				<text style="line-height: 50%;">取消订单</text>
			</view>
			<view class="confirm" @click="confirm">
				<text>确认支付</text>
			</view>
		</view>

		<view>
			<u-popup :show="showCancle" mode="center" @close="close" round="20"
				customStyle="width:450rpx; height:350rpx">
				<view class="bottomPay">
					<view>我想您一定是深思熟虑</view>
					<view>我们还需再改进</view>
					<view class="example-body" style="width: 220px;">
						<uni-combox :candidates="candidates" placeholder="您的选择是我们进步的动力" v-model="reason"></uni-combox>
					</view>
					<view @click="returnPay" class="returnPay">
						<text>确认</text>
					</view>
				</view>
			</u-popup>
		</view>
		<view>
		</view>
		<view class="popup" v-show="showPopup">
			<u-loading-icon></u-loading-icon>
			<view>支付中...</view>
		</view>
		<view class="popup" v-show="canclePopup">
			<u-loading-icon></u-loading-icon>
			<view>取消订单中...</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				current: 1,
				value: '',
				orderAmount: '',
				orderNumber: '',
				orderTime: '',
				nowDate: '',
				payTime: '',
				orderingTime: '',
				orderId: '',
				showCancle: false,
				candidates: ['不想要了', '想重新下单', '地点有变', '不想去了', '时间冲突了', '选错了'],
				reason: '',
				showPopup: false,
				canclePopup: false,
				gotoOrder: false,
				throttleFlag: true

			}
		},
		computed: {
			...mapState('messageArray', ['messageArray']),
		},
		onLoad(e) {
			var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate(),
				hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
				minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
				second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
			month >= 1 && month <= 9 ? (month = "0" + month) : "";
			day >= 0 && day <= 9 ? (day = "0" + day) : "";
			var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
			this.orderId = this.messageArray.id
			this.nowDate = hour + ':' + minute + ':' + second
			this.orderAmount = e.orderAmount
			this.orderNumber = e.orderNumber
			this.orderTime = e.orderTime
			this.orderingTime = this.orderTime.substring(11, this.orderTime.length)
		},
		mounted() {},
		methods: {
			cancel() {
				this.showCancle = true
			},
			close() {
				this.reason = ''
				this.showCancle = false
			},
			async confirm() {
				if (this.throttleFlag) {
					this.throttleFlag = false;
					setTimeout(() => {
						this.throttleFlag = true;
					}, 1000); // 设置节流时间间隔为1秒
					this.showPopup = true;
					const res = await uni.$u.http.get("/user/order/payment/" + this.orderId, {
						custom: {
							auth: true
						}
					}).then(result => {
						if (result.data.code != 1) {
							this.showPopup = false;
							uni.showToast({
								title: '支付失败',
								icon: 'error',
								duration: 1000
							})
						}
						if (result.data.code === 1) {
							this.current = 2
							var payData = new Date();
							this.payTime = payData.getHours() + ':' + payData.getMinutes() + ':' + payData
								.getSeconds()
							this.showPopup = false;
							uni.showToast({
								title: '支付成功',
								icon: 'success',
								duration: 1000
							})
							setTimeout(function() {
								uni.navigateBack({
									delta: 2
								});
								uni.showToast({
									title: '返回线路详情页',
									icon:'success',
									duration: 1000
								})
							}, 2000);
							
						}
					})
				}
			},
			async returnPay() {
				if (this.throttleFlag) {
					this.throttleFlag = false;
					setTimeout(() => {
						this.throttleFlag = true;
					}, 1000); // 设置节流时间间隔为1秒
					const res = await uni.$u.http.post("/user/order/userCancel", {
						cancelReason: this.reason,
						id: this.orderId
					}, {
						custom: {
							auth: true
						}
					}).then(result => {
						console.log(result);
						if (result.statusCode === 200) {
							this.showPopup = false;
							uni.showToast({
								title: '取消成功',
								icon: 'success',
								duration: 1000
							})
							this.showCancle = false
							this.reason = ''
							setTimeout(function() {
								uni.navigateBack({
									delta: 2
								});
								uni.showToast({
									title: '将返回线路详情页',
									duration: 1000
								})
							}, 1500);
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.cancel {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		padding-right: 15rpx;
	}

	.confirm {
		display: flex;
		flex-direction: column;
		width: 95px;
		height: 45px;
		border-radius: 30rpx;
		color: #fff;
		background-color: #058e73;
		align-items: center;
		justify-content: center;
	}

	.returnPay {
		display: flex;
		flex-direction: column;
		width: 120rpx;
		height: 50rpx;
		border-radius: 20rpx;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
	}

	.bottomPay {
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		line-height: 70rpx;
	}

	.orderAmount {
		font-size: 20px;
		font-weight: bold;
		margin: 20px;
	}

	.head {
		background: linear-gradient(65deg, #07c8a2, #eeeeee);
		width: 100%;
		height: 350rpx;
		padding: 20rpx;
		box-shadow: 0 10px 25px rgba(0.1, 0.1, 0.1, 0.15);

		.orderhead,
		.orderbottom {
			margin: 10px;
			font-size: 30rpx;
			// color: #d2d4e3;
			color: black;
		}

		.orderNumber,
		.orderTime {
			margin: 10px;
			font-size: 50rpx;
			// color: #d2d4e3;
			color: black;
			width: 80%;
			height: 80rpx;
			border-bottom: 1px black solid;
		}
	}

	.popup {
		line-height: 100rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		width: 200rpx;
		height: 150rpx;
		transform: translate(-50%, -50%);
		background-color: #fff;
		border-radius: 5px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
		padding: 20px;
		max-width: 400px;
		text-align: center;
		z-index: 1000;
	}

	.orderPopup {
		line-height: 60rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		width: 350rpx;
		height: 200rpx;
		transform: translate(-50%, -50%);
		background-color: #fff;
		border-radius: 5px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
		padding: 20px;
		max-width: 400px;
		text-align: center;
		z-index: 1000;
	}
</style>